<template>
  <div id="classify-componet">
    <Nav>
      <template #middle> 商品分类 </template>
    </Nav>

    <Left :left_datas="left_data" @send_left="get_left"></Left>
    <Right :right_data="right_data"></Right>
  </div>
</template>

<script>
import Nav from "@/components/header/Nav.vue"
//中间部分
import Left from "@/views/classify/calssify_item/Left.vue"
import Right from "@/views/classify/calssify_item/Right.vue"

//请求数据
import request from "@/netword/index.js"

export default {
  name: "Classify",
  components: {
    Nav,
    Left,
    Right,
  },
  data() {
    return {
      //存储左边栏的数据
      left_data: [],
      //储存maitkey值
      maitkey: 3627,
      //存储右边栏的数据
      right_data: [],
    }
  },
  created() {
    this.get_leftData()

    this.get_left(3627)
  },
  methods: {
    //请求左边导航栏的数据
    async get_leftData() {
      const { data: res } = await request({
        url: "/category",
      })
      this.left_data = res.data.category.list
    },

    //接受左边导航栏发来的请求代码 并请求右侧数据
    async get_left(maitKey) {
      const { data: res } = await request({
        url: "/subcategory",
        params: {
          maitKey,
        },
      })

      this.right_data = res.data.list
      console.log(res.data.list)
    },
  },
}
</script>

<style lang="less" scoped>
#classify-componet {
  display: flex;
}
</style>
